<template>
  <div class="page">
    <div>
      <div>
        <!-- 搜索 -->
        <div class="top-div">
          <div class="search-div01">
            <div class="search-details-div">
              <div class="serch-icon">
                <span class="iconfont1 icon-sousuo1"></span>
              </div>
              <div class="serch-input-div">
                <input
                  @input="search"
                  class="serch-input"
                  type="search"
                  placeholder="请输入搜索关键词"
                  v-model="keyword"
                />
              </div>
              <div></div>
            </div>
          </div>
        </div>

        <!-- 分类列表 -->
        <div class="types">
          <div class="type-div">
            <div class="type-name-div scroll">
              <ul class="type-name-ul" id="type-name-ui">
                <li
                  v-for="(item,index) in typeList"
                  :key="item.categoryId"
                  @click="changeType(item.categoryId,index)"
                  :class="index===currentIndex?'on':''"
                  class="type-name-li"
                  id="type-name-li0"
                >
                  <div class="type-name-li-div" id="type-name-li-div0"></div>
                  <div class="type-name-li-name">{{item.name}}</div>
                </li>
              </ul>
            </div>

            <!-- 商品列表 -->
            <div class="type-details-div scroll">
              <ul class="type-details-ul" id="type-details-ul">
                <li v-for="item in productList" :key="item.productId" class="type-details-li">
                  <img :src="item.imgUrl" alt />
                  <p class="f12">金秋红蜜桃</p>
                </li>
              </ul>
              <div class="empty" v-if="productList.length===0">没有数据</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Footer />
  </div>
</template>

<script>
import Footer from "@/components/Footer";
import $axios from "@/utils/request";
export default {
  components: {
    Footer
  },

  data() {
    return {
      // 当前li
      currentIndex: 0,
      // 分类列表
      typeList: [],
      // 商品列表
      productList: [],
      // 搜索关键字
      keyword: "",
      // 防抖的teimer
      timer: null
    };
  },

  created() {
    this.getTypeList();
  },

  methods: {
    // 获取分类列表
    async getTypeList() {
      try {
        let res = await $axios.get("/category/all");
        this.typeList = res.list;
        // 第一个分类的id
        let firstId = res.list[0].categoryId;
        // 获取第一个分类的商品列表
        this.getProductList(firstId);
      } catch (error) {
        this.$toast.fail(error);
      }
    },

    // 获取商品列表
    async getProductList(id) {
      try {
        let data = { categoryId: id };
        let res = await $axios.get("/product/list", data);
        this.productList = res.list;
      } catch (error) {
        this.$toast.fail(error);
      }
    },

    // 切换分类
    changeType(categoryId, index) {
      this.currentIndex = index;
      this.getProductList(categoryId);
    },

    // 搜索
    search() {
      if (!this.keyword) return false;
      try {
        // 防抖
        clearTimeout(this.timer);
        this.timer = setTimeout(async () => {
          let res = await $axios.get("/product/search", {
            keyword: this.keyword
          });
          this.productList = res.list;
        }, 1000);
      } catch (error) {
        console.log(error);
        this.$toast.fail(error);
      }
    }
  }
};
</script>

<style lang="less" scoped>
@import "./index.less";
.empty {
  line-height: 50px;
  text-align: center;
  color: #777;
}
</style>